import {Component} from "react";
import {Modal, Provider, Toast} from "@ant-design/react-native";
import {apiDomain, postData} from "../../common/api";
import {Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";

export default class ProductList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
    }

    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }

    componentDidMount() {
        this.loadList()
    }

    loadList() {
        const loading = Toast.loading('loading')
        const url = apiDomain + "/Index/getProductList"
        postData(url, {}).then(res => {
            if (res.code === 200) {
                console.log('get list success', res.data)
                this.setState({
                    list: res.data
                })
            } else {
                Modal.alert('Error', res.msg, [
                    {text: 'OK'},
                ])
            }
        }).finally(() => {
            Toast.remove(loading)
        })
    }

    viewProduct(id) {
        const _this = this
        this.props.navigation.navigate('viewProduct', {
            id: id,
            toLogin: () => {
                _this.props.toLogin()
            }
        })
    }

    render() {
        return (
            <ScrollView
                style={styles.container}
                automaticallyAdjustContentInsets={false}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
            >
                {
                    this.state.list.map(o => {
                        return (
                            <TouchableOpacity style={styles.item} key={o.id}
                                              onPress={() => this.viewProduct(o.id)}>
                                <View style={styles.coverView}>
                                    <Image source={{uri: o.cover}} style={styles.cover}/>
                                </View>
                                <View style={styles.info}>
                                    <View style={{justifyContent: 'space-between', flexDirection: 'row', alignItems: 'flex-end'}}>
                                        <View>
                                            <Text style={styles.title}>{o.name}</Text>
                                            <Text style={styles.content}>{o.description}</Text>
                                        </View>
                                        <Text style={styles.price}>${o.salesPrice}</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        )
                    })
                }
            </ScrollView>
        );
    }
}


const {width, height} = Dimensions.get('window');
const {screenWidth, screenHeight} = Dimensions.get('screen');

const styles = StyleSheet.create({
    provider: {
        width: screenWidth,
        height: screenHeight
    },
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        width: screenWidth,
        height: screenHeight
    },
    item: {
        paddingLeft: 20,
        paddingRight: 20,
        paddingTop: 10,
        paddingBottom: 10,
        borderColor: '#f5f6f5',
        backgroundColor: '#fdfdfd',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        marginTop: 30,
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold'
    },
    content: {
        fontSize: 13,
        marginTop: 5
    },
    info: {
        flex: 1,
        flexDirection: 'column',
        marginTop: 10
    },
    cover: {
        width: 0.9 * width,
        height: 0.4 * width
    },
    coverView: {
    },
    mainTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        paddingTop: 20
    },
    price: {
        color: 'rgb(0, 21, 41)',
        fontSize: 18,
        marginTop: 5,
        fontWeight: 'bold'
    }
});
